<template>
  <v-container class="player-container" fluid grid-list-md>
    <v-layout row wrap>
      <v-flex md12>
        <v-toolbar card light color="white">
          <v-toolbar-title>
            <v-btn icon @click.native="$router.push('/player/players')">
              <v-icon>keyboard_backspace</v-icon>
            </v-btn>
            <span>玩家详情</span>
          </v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <v-card>
          <v-layout row wrap class="py-3 my-2">
            <v-flex md1 sm1 class="ml-3">
              <v-avatar size="84" class="grey lighten-4 ml-5">
                <img :src="playerItem.headUrl" alt="头像">
              </v-avatar>
            </v-flex>
            <v-flex md8 sm4>
              <v-layout row wrap>
                <v-flex md12>
                  <span class="display-1"> {{ playerItem.nickname }} </span>
                </v-flex>
                 <v-flex md3>
                  <span class="headline">
                    玩家ID: {{playerItem.lftid}}
                  </span>
                  <v-btn flat icon @click="openModal(1)">
                    <v-icon color="teal">edit</v-icon>
                  </v-btn>
                </v-flex>

                <v-flex md2>
                  <v-chip outline color="yellow darken-2" text-color="black">
                    <v-avatar class="yellow darken-2">
                      <v-icon dark size="20">fa-diamond</v-icon>
                    </v-avatar>
                    <span class="subheading">{{ playerItem.amount }}</span>
                  </v-chip>
                  <v-btn flat icon @click="openModal(2)">
                    <v-icon color="teal">edit</v-icon>
                  </v-btn>
                </v-flex>

                <v-flex md2>
                  <v-chip outline color="green" text-color="black">
                    <v-avatar class="green accent-3 white--text">
                      <v-icon dark size="20">fa-stack-overflow</v-icon>
                    </v-avatar>
                    <span class="subheading">{{ playerItem.proxyLevel | ProxyLevel}}</span>
                  </v-chip>
                </v-flex>
                <v-flex md1>
                  <v-chip outline :color="playerItem.sex == 2 ? 'red' : 'blue'" text-color="black">
                    <v-avatar :class="(playerItem.sex == 2 ? 'red' : 'blue') + ' accent-3 white--text'">
                      <v-icon dark size="20">{{playerItem.sex == 2 ? 'fa-venus' : 'fa-mars'}}</v-icon>
                    </v-avatar>
                    <span class="subheading">{{ playerItem.sex == 2 ? '女' : '男' }}</span>
                  </v-chip>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-card>
        <!-- 玩过的游戏统计 -->
        <v-flex md12>
          <v-layout row justify-space-between class="mx-0">
            <v-flex md6 class="mr-1">
              <v-card color="white">
                <v-card-title class="title card-title-bg">
                  <v-icon>fa fa-gamepad</v-icon>
                  <span class="mx-2">游戏统计</span>
                </v-card-title>
                <v-divider></v-divider>
                <v-card-text class="body-2">
                  <v-data-table :loading="showProgress" :headers="gameHeaders" :items="gameData" hide-actions>
                    <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
                    <template slot="items" slot-scope="props">
                      <td class="text-xs-left subheading">{{ props.item.gameId | GameName }}</td>
                      <td class="text-xs-left subheading">{{ props.item.number}}</td>
                      <td class="text-xs-left subheading">{{ `${props.item.winRate * 100}%` }}</td>
                      <td class="text-xs-left subheading">{{ props.item.updateTime }}</td>
                      <td class="text-xs-left subheading">{{ props.item.count }}</td>
                    </template>
                    <!-- 没有数据时显示的提示 -->
                    <template slot="no-data">
                      <div class="text-md-center">
                        <v-icon color="yellow darken-3">warning</v-icon>
                        <span class="subheading">暂无数据</span>
                      </div>
                    </template>
                  </v-data-table>
                  <div class="text-xs-center my-2">
                    <v-pagination @input="pageGameChange" circle :length="pageGame.pageCount" :total-visible="pageGame.totalVisible" v-model="pageGame.page"></v-pagination>
                  </div>
                </v-card-text>
              </v-card>
            </v-flex>
            <!-- 加入的俱乐部 -->
            <v-flex md6 class="ml-1">
              <v-card color="white">
                <v-card-title class="title card-title-bg">
                  <v-icon>fa fa-group</v-icon>
                  <span class="mx-2">加入的俱乐部</span>
                </v-card-title>
                <v-divider></v-divider>
                <v-card-text class="body-2">
                  <v-data-table :loading="showProgress" :headers="clubHeaders" :items="clubData" hide-actions>
                    <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
                    <template slot="items" slot-scope="props">
                      <td class="text-xs-left subheading">{{ props.item.crowdUserId }}</td>
                      <td class="text-xs-left subheading">{{ props.item.crowdName}}</td>
                      <td class="text-xs-left subheading">{{ props.item.crowdUserId }}</td>
                      <td class="text-xs-left subheading">{{ props.item.nickname }}</td>
                    </template>
                    <!-- 没有数据时显示的提示 -->
                    <template slot="no-data">
                      <div class="text-md-center">
                        <v-icon color="yellow darken-3">warning</v-icon>
                        <span class="subheading">暂无数据</span>
                      </div>
                    </template>
                  </v-data-table>
                  <div class="text-xs-center my-2">
                    <v-pagination @input="pageClubChange" circle :length="pageClub.pageCount" :total-visible="pageClub.totalVisible" v-model="pageClub.page"></v-pagination>
                  </div>
                </v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">{{dialogTitle}}</v-card-title>
        <v-card-text>
           <v-text-field :counter="6" mask="######" autofocus :prepend-icon="modalType === 2 ? 'fa-diamond' : 'account_circle'" label="" v-model="inputText"></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="light-blue" flat @click.native="confirmModal">确认</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as player from "../../api/player";
import { getTime } from "../../util";
import { mapMutations, mapState } from "vuex";

export default {
  data: () => ({
    dialog: false,
    showProgress: false,
    pagination: {},
    dialogTitle: "充值记录",
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    startDate: "",
    endDate: "",
    gamelimit: 10,
    gameoffset: 0,
    clublimit: 10,
    cluboffset: 0,
    chosenDate: "选择日期",
    inputText: "",
    modalType: 1,
    pageGame: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    pageClub: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    playerItem: {
      headUrl: "",
      lftid: 169502,
      nickname: "玩家昵称",
      telephone: 1692021544,
      gender: 0,
      gems: 50,
      proxyLevel: "二级代理"
    },
    gameHeaders: [
      { text: "游戏", value: "pcount", align: "left", sortable: false },
      { text: "局数", value: "method", align: "left", sortable: false },
      { text: "胜率", value: "status", align: "left", sortable: false },
      {
        text: "最近活跃时间",
        value: "actions",
        align: "left",
        sortable: false
      },
      { text: "消耗钻石", value: "actions", align: "left", sortable: false }
    ],
    gameData: [],
    clubHeaders: [
      { text: "俱乐部ID", value: "pcount", align: "left", sortable: false },
      { text: "俱乐部名称", value: "method", align: "left", sortable: false },
      { text: "群主ID", value: "actions", align: "left", sortable: false },
      { text: "群主昵称", value: "actions", align: "left", sortable: false }
    ],
    clubData: []
  }),
  mounted() {
    let params = this.$route.params;
    this.uid = params.id.replace(":", "");
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.isSearch = false;
        this.offset = 0;
        this.queryForm.fromTime = "";
        this.queryForm.toTime = "";
        this.getPlayerDetails();
      });
    });
    this.getPlayerDetails();
    this.getPlayerGame();
    this.getPlayerClub();
  },
  created() {
    this.initialize();
  },
  watch: {},
  filters: {
    GameName: function(val) {
      switch (val) {
        case 1:
          return "经典斗牛";
        case 2:
          return "斗公牛";
        case 3:
          return "红中麻将";
        case 4:
          return "欢乐金花";
        case 5:
          return "点子牛";
        case 6:
          return "三公";
        case 8:
          return "跑得快";
        case 10:
          return "长沙麻将";
        case 11:
          return "平江扎鸟";
        default:
          return "未定义";
      }
    }
  },
  methods: {
    getTime,
    getPlayerDetails() {
      player.getPlayerDetails.r(this.uid).then(({ data }) => {
        if (data.result == 0) {
          this.playerItem = data.data;
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
      });
    },
    getPlayerGame() {
      let opt = {
        limit: this.gamelimit,
        offset: this.gameoffset,
        uid: this.uid
      };
      player.getPlayerGame.r(opt).then(({ data }) => {
        console.log(data);
        let d = data.data;
        if (data.result == 0) {
          this.gameData = d.dataList || [];
          this.pageGame.pageCount = data.totalCount
            ? Math.ceil(data.totalCount / this.limit)
            : 1;
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
      });
    },
    getPlayerClub() {
      let opt = {
        limit: this.clublimit,
        offset: this.cluboffset,
        uid: this.uid
      };
      player.getPlayerClub.r(opt).then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          this.clubData = d.dataList || [];
          this.pageClub.pageCount = data.totalCount
            ? Math.ceil(data.totalCount / this.limit)
            : 1;
            
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
      });
    },
    editLftid() {
      let opt = Object.assign({}, this.playerItem);
      opt.lftid = this.inputText;
      player.editLftid.r({userInfo: opt}).then(({ data }) => {
        if (data.result == 0) {
          this.dialog = false;
          this.getPlayerDetails()
          $Vue.$emit("toggleSnackbar", {
            text: '玩家ID已修改'
          });

        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
      })
      .catch(err=>{
        console.log(err)
      })
    },
    editDiamond() {
      let opt = Object.assign({}, this.playerItem);
      opt.amount = this.inputText;
      player.editDiamond.r({userInfo: opt}).then(({ data }) => {
        if (data.result == 0) {
          this.dialog = false;
          $Vue.$emit("toggleSnackbar", {
            text: '玩家钻石数已修改'
          });
          this.getPlayerDetails()
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
      })
      .catch(err=>{
        console.log(err)
      })
    },
    initialize() {
      this.gameData = [
        {
          gameName: "斗牛",
          winrate: "89%",
          rounds: 24,
          gemsConsumed: 140,
          activeTime: "2018-4-19"
        },
        {
          gameName: "长沙麻将",
          winrate: "78%",
          rounds: 163001,
          gemsConsumed: 666,
          activeTime: "2018-4-19"
        }
      ];
      this.clubData = [
        {
          clubName: "佳话游戏",
          winrate: "89%",
          clubId: 102424,
          gameName: "",
          methods: "轮庄",
          onwerId: 102142,
          onickname: "o(ﾟДﾟ)っ"
        },
        {
          clubName: "乐翻天",
          winrate: "78%",
          clubId: 163001,
          methods: 666,
          onwerId: 141014,
          onickname: "o()っ"
        }
      ];
    },
    pageGameChange(page) {
      this.gameoffset = (page - 1) * this.gamelimit;
    },
    pageClubChange(page) {
      this.cluboffset = (page - 1) * this.clublimit;
    },
    openModal(type) {
      this.modalType = type;
      if (type === 1) {
        this.dialogTitle = "修改玩家ID";
        this.inputText = this.playerItem.lftid
      } else {
        this.inputText = this.playerItem.amount
        this.dialogTitle = "修改玩家钻石数";
      }
      this.dialog = true;
    },
    confirmModal() {
      if (this.modalType === 1) {
        this.editLftid();
      } else {
        this.editDiamond();
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>

